<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>文档</title>
  <link href="./css/semantic/semantic.min.css" rel="stylesheet">
  <link href="./css/markdown.css" rel="stylesheet">
  <style>
    body{padding-top:0;background:#f7f7f7}
    body>.ui.container{width:100%;padding:0}
    #project-title{background:#6e6e6e;width:100%;line-height:3.572rem;color:#fff;font-size:1.2rem}
    #project-title .title-wrap{font-weight:700;padding:0 12px;width:100%;max-width:1366px!important;min-width:900px;margin:0 auto}
    #project-title .left,#project-title right{display:inline-block}
    #project-title .right{float:right}
    #project-title .right .wiki-actions .menu{left:auto;right:0;margin-top:.4em!important}
    #wiki-preview-container{width:100%;max-width:1366px!important;min-width:900px;padding:0;border:1px solid #e3e9ed;border-top:0}
    #wiki-preview>.ui.segment{margin-top:0;padding:1rem;padding-left:0;border:0}
    .hover-places{display:inline-block}
    #page-detail{width:60%;margin:0 auto}
    #page-detail .title{font-weight:700;font-size:24px;padding:12px 0;border-bottom:1px solid #ccc}
    #page-detail .content{margin-top:15px}
    .content p{word-wrap:break-word}
    #wiki-parent,#wiki-title,#wikis{display:none}
    .ui.grid{padding:0!important}
    #ex-all{cursor:pointer;color:#537c8d}
  </style>
</head>
<body>
  <div class="ui container">
    <div id="project-title">
      <div class="title-wrap">
        <div class="left">
          <i class="icon eye"></i>
          文档预览:
          smallwei/Avue
        </div>
        <div class="right">
          Export by Gitee
        </div>
      </div>
    </div>

    <div class="ui container" id="wiki-preview-container">
      <div id="wiki-preview">
        <div class="ui segment">
          <div id="page-detail" class="markdown-body">
            <div class='title'>crud组件文档</div><div class='content'><h4><a class="anchor" id="表格属性" href="#表格属性"></a>表格属性</h4>
<table width="100%">
  <tr>
    <th width="120" height="50">参数</th>
    <th width="100">详细解释</th>
    <th width="100">类型</th>
    <th width="250">可选值</th>
    <th width="100">默认值</th>
  </tr>
  <tr>
    <td height="50">height</td>
    <td>表格的高度</td>
    <td>String / Number</td>
    <td>一</td>
    <td>500</td>
  </tr>
  <tr>
    <td height="50">border</td>
    <td>是否显示表格边框</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">index</td>
    <td>是否显示表格的序号</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">selection</td>
    <td>表格的是否可勾选</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">menu</td>
    <td>是否显示操作菜单栏</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">menuWidth</td>
    <td>操作菜单栏的宽度</td>
    <td>String / Number</td>
    <td>一</td>
    <td>240</td>
  </tr>
  <tr>
    <td height="50">editBtn</td>
    <td>是否显示编辑按钮</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">delBtn</td>
    <td>是否显示删除按钮</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">page</td>
    <td>是否显示分页栏目</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
  <tr>
    <td height="50">dic</td>
    <td>要加载字典的字段名(调用vuex中字典接口)</td>
    <td>Array</td>
    <td>一</td>
    <td>一</td>
  </tr>
</table>
 

<p>#### 列属性
 </p><table width="100%">
  <tr>
    <th width="120" height="50">参数</th>
    <th width="100">详细解释</th>
    <th width="100">类型</th>
    <th width="250">可选值</th>
    <th width="100">默认值</th>
  </tr>
  <tr>
    <td height="50">label</td>
    <td>列名称</td>
    <td>String</td>
    <td>一</td>
    <td>一</td>
  </tr>
   <tr>
        <td height="50">prop</td>
    <td>列对应json字段</td>
    <td>String</td>
    <td>一</td>
    <td>一</td>
  </tr>
   <tr>
    <td height="50">width</td>
    <td>列宽度</td>
    <td>String / Number</td>
    <td>一</td>
    <td>一</td>
  </tr>
     <tr>
    <td height="50">fixed</td>
    <td>是否为冻结列</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>true</td>
  </tr>
    <tr>
    <td height="50">hide</td>
    <td>隐藏列</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>false</td>
  </tr>
  <tr>
    <td height="50">span</td>
    <td>对应表单格栅列</td>
    <td>Number</td>
    <td>一</td>
    <td>12</td>
  </tr>
   <tr>
    <td height="50">type</td>
    <td>对应表单格类型</td>
    <td>String</td>
    <td>select / radio / checkbox / date </td>
    <td>input</td>
  </tr>
   <tr>
    <td height="50">visdiplay</td>
    <td>表单隐藏</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>false</td>
  </tr>
   <tr>
    <td height="50">solt</td>
    <td>列中支持自定义dom</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>false</td>
  </tr>
   <tr>
    <td height="50">overHidden</td>
    <td>超出省略号显示</td>
    <td>Boolean</td>
    <td>true / false</td>
    <td>false</td>
  </tr>
    <tr>
    <td height="50">dicData</td>
    <td>当前列加载的字典，只有type为select / radio / checkbox 才起作用</td>
    <td>String</td>
    <td>一</td>
    <td>一</td>
  </tr>
   <tr>
    <td height="50">rules</td>
    <td>表单的校验例([{ required: true, message: "请输入用户名", trigger: "blur" }])</td>
    <td>JSON</td>
    <td>一</td>
    <td>一</td>
  </tr>
 </table>
<h4><a class="anchor" id="表格事件" href="#表格事件"></a>表格事件</h4>
<table width="100%">
  <tr height="50">
    <th width="30%">事件名称</th>
    <th width="50%">说明</th>
    <th width="20%">回调参数</th>
  </tr>
  <tr height="50">
    <td>toggleSelection</td>
    <td>返回当前选择的json对象</td>
    <td>row</td>
  </tr>
   <tr height="50">
    <td>handleSelectionChange</td>
    <td>返回当前选中的json数组对象</td>
    <td>row</td>
  </tr>
   <tr height="50">
    <td>handleSave</td>
    <td>表格添加成功的回调函数</td>
    <td>row，done</td>
  </tr>
   <tr height="50">
    <td>handleDel</td>
    <td>表格删除事件回调函数</td>
    <td>row，done</td>
  </tr>
    <tr height="50">
    <td>handleUpdate</td>
    <td>表格编辑事件回调函数</td>
    <td>row，done</td>
  </tr>
    <tr height="50">
    <td>boxhandleClose</td>
    <td>表单关闭前处理事件回调函数</td>
    <td>done</td>
  </tr>
    <tr height="50">
    <td>boxhandleOpen</td>
    <td>表单打开前处理事件回调函数</td>
    <td>done</td>
  </tr>
   <tr height="50">
    <td>$refs.crud.toggleSelection(row);</td>
    <td>选中那些数据传入row（当前对象）</td>
    <td>一</td>
  </tr>
   <tr height="50">
    <td>$refs.crud.handleAdd();</td>
    <td>打开表单的增加弹窗</td>
    <td>一</td>
</tr>
</table>
<h4><a class="anchor" id="自定义列dom的例子" href="#自定义列dom的例子"></a>自定义列dom的例子</h4><div class="white"><div class="highlight"><pre>支持vue的solt卡槽分发添加dom内容<span class="nt">&lt;br</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;template</span> <span class="na">slot-scope=</span><span class="s">"scope"</span> <span class="na">slot=</span><span class="s">"username"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;el-tag&gt;</span>{{scope.row.username}}<span class="nt">&lt;/el-tag&gt;</span>
<span class="nt">&lt;/template&gt;</span>
<span class="nt">&lt;template</span> <span class="na">slot-scope=</span><span class="s">"scope"</span> <span class="na">slot=</span><span class="s">"menu"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;el-button</span> <span class="na">icon=</span><span class="s">"el-icon-check"</span> <span class="na">size=</span><span class="s">"small"</span> <span class="err">@</span><span class="na">click=</span><span class="s">"handleGrade(scope.row,scope.$index)"</span><span class="nt">&gt;</span>权限<span class="nt">&lt;/el-button&gt;</span>
<span class="nt">&lt;/template&gt;</span>
slot的名字为字段的名字，当为menu时为菜单添加dom内容<span class="nt">&lt;br</span> <span class="nt">/&gt;</span>
js自动配置crud<span class="nt">&lt;br</span> <span class="nt">/&gt;</span>
{
  border: true,//表格是否显示边框 default:false
  index: true,///表格是否显示序号 default:false
  selection: true,//表格是否显示可选select default:false
  menu:true,//表格是否显示操作栏, default:true
  menuWidth:250,//操作菜单的宽度
  editBtn:false,//是否显示编辑按钮 default:true
  delBtn:false,//是否显示删除按钮 default:true
  page:false,//是否显示分页 default:true
  height:'500'//表格的高度 default:auto
  dic:['GRADE','SEX'],//传入需要获取字典的变量，看vuex中的getDic方法
  column: [
    {
      label: "用户名",//表格的标题
      prop: "username",//表格的key
      width: "150",//表格的宽度
      fixed: true,//是否冻结列
      hide:true,//是否隐藏
      span:12,//表单格栅显示的列
      type:'select', //select | radio | checkbox | date defaulttext
      visdiplay:true,//表单不显示
      solt:true,//支持自定义dom default:false,
      overHidden: true,//超出省略号显示
      dicData: 'GRADE', //传入需要引用的字典
      ],//type的数据字典,当type为：select | radio | checkbox 加载
      dataDetail: row =&gt; {
        return row.username+user.name;//是否对列表数据处理
      },
      rules: [{ required: true, message: "请输入用户名", trigger: "blur" }] //表单校验规则
    }
}
</pre></div></div></div>
          </div>
        </div>
      </div>
      </div>
  </div>
</body>
</html>